<template>
  <div class="main">
		<ul>
			<li class="item"  v-for="(item, index) in lists" :key="index">				
				<a :href="item.zne_jumplink" target="_blank">
							<img  :src="item.zne_thumb?item.zne_thumb:nopic" :alt="item.zne_title">	
				</a> 
			</li>			
		</ul>
		<el-row type="flex" class="row-bg" justify="center" v-if="isShow"><el-col :span="20"><mt-button size="small" type="default" style="width:100%"   @click.native="loadBottom()">加载更多</mt-button></el-col></el-row>
		<br/>
</div>
</template>

<script>
import {Loadmore,Toast,Indicator} from 'mint-ui';
export default {
	components:{
      'v-loadmore':Loadmore,
      Toast,
      Indicator,
    },
  	name: 'HelloWorld',
  	data () {
		return {
			isShow:true,
			lists:[],
			nopic:require('../assets/images/nopic.jpg'),
			pageNo:1,
			pageSize:10,			
			allLoaded: false, //是否可以上拉属性，false可以上拉，true为禁止上拉，就是不让往上划加载数据了
			scrollMode:"auto", //移动端弹性滚动效果，touch为弹性滚动，auto是非弹性滚动
			totalpage:0,
			loading:false,
			bottomText: '',
			keyword:'', 
		}
	},
	mounted(){
    this.loadPageList();  //初次访问查询列表
  },
	methods :{
		loadBottom:function() {
      // 上拉加载
      this.more();// 上拉触发的分页查询
      this.$refs.loadmore.onBottomLoaded();// 固定方法，查询完要调用一次，用于重新定位
      Indicator.open({
        text: '加载中...',
        spinnerType: 'fading-circle'
      });
    },
    loadPageList:function (){
      Indicator.open({
        text: '加载中...',
        spinnerType: 'fading-circle'
      });
      // 查询数据
        let listurl = 'news/list/categoryid/12/page/'+this.pageNo+"/pageSize/"+this.pageSize;
        this.$fetch( listurl )
            .then((res) => {
            this.lists = res.data.items;
            this.totalpage = Math.ceil(res.data.total/this.pageSize);
            if(this.totalpage == 1){
            this.allLoaded = true;
            }
            this.$nextTick(function () {
            // 是否还有下一页，加个方法判断，没有下一页要禁止上拉
            this.scrollMode = "touch";
            this.isHaveMore();
            });
            Indicator.close();                            
        });
    },
    more:function (){
      // 分页查询
      if(this.totalpage == 1){
        this.pageNo = 1;
        this.allLoaded = true;
      }else{
        this.pageNo = parseInt(this.pageNo) + 1;
        this.allLoaded = false;
      }
      let listurl = 'news/list/categoryid/12/page/'+this.pageNo+"/pageSize/"+this.pageSize;
        this.$fetch( listurl )
            .then((res) => {
            this.lists = this.lists.concat(res.data.items);            
            this.isHaveMore();
            Indicator.close();
      });
     
    },
    isHaveMore:function(){
      // 是否还有下一页，如果没有就禁止上拉刷新
      //this.allLoaded = false; //true是禁止上拉加载
      if(this.pageNo == this.totalpage){
        this.allLoaded = true;
		this.isShow = false;
      }
    }
	},	
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/*start main */
.main{
	padding: 4%;
}
.item {	
	width: 25%;
	float: left;
	padding: 4%;
}

</style>
